<template>
  <div ref="chinaMap" class="chinaMap" style="width: 35vw;height: 30vw;" />
</template>
<script>
import '@/utils/echarts/map/js/china.js'
export default {
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      const mapcharts = this.$echarts.init(this.$refs.chinaMap)
      // 窗口尺寸改变
      window.addEventListener('resize', function() {
        mapcharts.resize()
      })
      const data = [
        { name: '北京', value: 21177 },
        { name: '天津', value: 14122 },
        { name: '河北', value: 2323 },
        { name: '山西', value: 18134 },
        { name: '内蒙古', value: 14337 },
        { name: '辽宁', value: 6447 },
        { name: '吉林', value: 8442 },
        { name: '黑龙江', value: 24426 },
        { name: '上海', value: 9234 },
        { name: '江苏', value: 10992 },
        { name: '浙江', value: 22914 },
        { name: '安徽', value: 12909 },
        { name: '福建', value: 9116 },
        { name: '江西', value: 9919 },
        { name: '山东', value: 1999 },
        { name: '河南', value: 9397 },
        { name: '湖北', value: 9116 },
        { name: '湖南', value: 8114 },
        { name: '重庆', value: 8991 },
        { name: '四川', value: 9125 },
        { name: '贵州', value: 6892 },
        { name: '云南', value: 9883 },
        { name: '西藏', value: 8889 },
        { name: '陕西', value: 6680 },
        { name: '甘肃', value: 15666 },
        { name: '青海', value: 11880 },
        { name: '宁夏', value: 1888 },
        { name: '新疆', value: 6897 },
        { name: '广东', value: 1823 },
        { name: '广西', value: 5999 },
        { name: '海南', value: 16194 },
        { name: '澳门', value: 6614 }

      ]

      // 按照值的大小进行排序（从大到小）
      data.sort((a, b) => b.value - a.value)

      // 提取排序后的省份名称和对应的值
      const provinceNames = data.map(item => item.name).reverse()
      const provinceValues = data.map(item => item.value).reverse()

      // 绘制图表
      mapcharts.setOption({
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: provinceNames.reverse() // 反转省份名称刻度顺序
        },
        series: [
          {
            type: 'bar',
            data: provinceValues,
            itemStyle: {
              color: 'red'
            }
          }
        ]

      })
    }
  }

}
</script>
<style>

</style>
